<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<%@ include file="/common.jsp" %>
<!-- 上传图片插件 -->
<link href="${pageContext.request.contextPath }/static/uploadify/uploadify.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="${pageContext.request.contextPath }/static/uploadify/swfobject.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/uploadify/jquery.uploadify.v2.1.4.min.js"></script>
<!-- 上传图片插件 -->
<script type="text/javascript">
var jsessionid = "<%=session.getId()%>";  //勿删，uploadify兼容火狐用到
</script>
<script type="text/javascript">
$(function() {
	var str='';
	$("#uploadTwoDimensonImg").uploadify({
		'buttonImg'	: 	"${pageContext.request.contextPath }/static/images/twoDimensonCode_btn.png",
		'buttonText':	'选择二维码图片',//定义显示在默认按钮上的文本
		'uploader'	:	"${pageContext.request.contextPath }/static/uploadify/uploadify.swf",
		'script'    :	"${pageContext.request.contextPath }/static/uploadify/uploadFile.jsp;jsessionid="+jsessionid,
		'cancelImg' :	"${pageContext.request.contextPath }/static/uploadify/cancel.png",
		'folder'	:	"/${QRReadPath}",//上传文件存放的路径,请保持与uploadFile.jsp中PATH的值相同
		'queueId'	:	"fileQueue",
		'queueSizeLimit'	:	1,//限制上传文件的数量
		'fileExt'     : '*.jpg;*.gif;*.png',
		'fileDesc'    : 'Please choose(.JPG, .GIF, .PNG)',
		'auto'		:	false,
		'multi'		:	true,//是否允许多文件上传
		'simUploadLimit':	2,//同时运行上传的进程数量
		'buttonText':	"files",
		'scriptData':	{'uploadPath':'/${QRReadPath}'},//这个参数用于传递用户自己的参数，此时'method' 必须设置为GET, 后台可以用request.getParameter('name')获取名字的值
		'method'	:	"GET",
		'onComplete':function(event,queueId,fileObj,response,data){
			str = response.trim();//单个上传完毕执行
		},
		'onAllComplete' : function(event,data) {
			//alert(str);	//全部上传完毕执行
			readContent(str);
	   	},
	   	'onSelect' : function(event, queueId, fileObj){//每添加一个文件至上传队列时触发该事件
	   		//alert(1);
	   		$("#hasTp1").val("ok");
	   	}
	});
});

function uploadTwo(){
	if($("#hasTp1").val()=="no"){
		$.messager.alert('提示', '请选择二维码', 'info');
		return false;
	}
	$('#uploadTwoDimensonImg').uploadifyUpload();
}	

//去后台解析二维码返回解析内容
function readContent(str){
	$.ajax({
		type: "POST",
		url: '${pageContext.request.contextPath}/tools/readTwoDimensionCode.do',
    	data: {imgId:str,tm:new Date().getTime()},
		dataType:'json',
		cache: false,
		success: function(result){
			progressClose();
			 if(result.success){
			 	$.messager.alert('提示', result.msg, 'info');
			 	$("#readContent").text(result.obj);
			 }else{
			 	$.messager.alert('错误', result.msg, 'error');
			 	$("#readContent").text('');
				return;
			 }
		},
		error:function(){
			$.messager.alert('错误', '系统出现异常！', 'error');
		}
	});
}

//生成二维码
function createTwoD(){
	progressLoad();
	if($("#encoderContent").val()==""){
		$.messager.alert('错误', '请输入生成二维码的内容', 'error');
		$("#encoderContent").focus();
		return false;
	}
	$.ajax({
		type: "POST",
		url: '${pageContext.request.contextPath}/tools/createTwoDimensionCode',
    	data: {encoderContent:$("#encoderContent").val(),tm:new Date().getTime()},
		dataType:'json',
		cache: false,
		success: function(result){
			//console.info(result);
			 progressClose();
			 if(result.success){
			 	$.messager.alert('提示', result.msg, 'info');
				$("#encoderImgId").attr("src",'${pageContext.request.contextPath}/' + result.obj);       
			 }else{
			 	$.messager.alert('错误', result.msg, 'error');
				$("#encoderImgId").attr("src","${pageContext.request.contextPath }/static/images/twoDimensionCode_default.png");
				return;
			 }
		},
		error:function(){
			$.messager.alert('错误', '系统出现异常！', 'error');
		}
	});
}
</script>
<body class="easyui-layout" data-options="fit:true,border:false">
	<div id="p1" class="easyui-panel" title="生成二维码" style="width:100%;padding:10px;">
    	<table >
            <tr>
               <td>二维码内容：</td>
               <td rowspan="3">
               		<!-- 生成之前默认显示的图片 -->
    				<img id="encoderImgId" cache="false" 
    					src="${pageContext.request.contextPath }/static/images/twoDimensionCode_default.png"
    				 	width="175px" height="175px;"/>
               </td>
            </tr>
            <tr>
               <td>
               	<textarea id="encoderContent" style="width:375px;height:150px;">https://www.baidu.com</textarea>
               </td>	
           </tr>
           <tr>    
               <td align="right">
               		<a onclick="createTwoD();" href="javascript:void(0);" class="easyui-linkbutton" 
		    			data-options="plain:true,iconCls:'fi-paint-bucket icon-black',iconAlign:'top'">生成二维码</a>
               </td>
           </tr>
        </table>
    </div>
    <div id="p2" class="easyui-panel" title="解析二维码" style="width:100%;padding:10px;">
    	<input type="hidden" value="no" id="hasTp1" />
    	<table>
           <tr >
               <td >上传二维码:</td>
               <td><div id="uploadTwoDimensonImg"></div></td>
               <td >
               		<a onclick="uploadTwo();" href="javascript:void(0);" 
    					class="easyui-linkbutton" 
    					data-options="plain:true,iconCls:'fi-paint-bucket icon-black',iconAlign:'top'">解析二维码</a>
               </td>
           </tr>
           <tr>
               <td>解析结果</td>
               <td colspan="2">
               		<textarea id="readContent" readonly="readonly" style="width:375px;height:150px;"></textarea>
               </td>
           </tr>
        </table>
    </div>
</body>
</html>
